<template>
  <a-layout style="min-width: 1300px; background: #ffffff">
    <a-affix>
      <a-layout-header>
        <a-row>
          <a-col :offset="2" :span="4">
            <a class="daily-title" href="/">DAILY-PLATFORM</a>
          </a-col>
          <a-col :span="16">
            <a-menu :selectedKeys="current" mode="horizontal" @click="clickMenuItem">
              <a-menu-item key="about">
                <template #icon>
                  <appstore-outlined/>
                </template>
                关于
              </a-menu-item>
              <a-sub-menu key="util">
                <template #icon>
                  <SettingOutlined/>
                </template>
                <template #title>工具</template>
                <a-menu-item-group v-for="fa in menuFatherLists" :key="fa.menuid" :title="fa.menuname">
                  <a-menu-item v-for="m in fa.userMenuLists" :key="m.menuid">{{ m.menuname }}</a-menu-item>
                </a-menu-item-group>
              </a-sub-menu>
            </a-menu>
          </a-col>
          <a-col :span="1">
            <UserHead/>
          </a-col>
        </a-row>
      </a-layout-header>
    </a-affix>
    <a-layout-content>
<!--      <ContentView/>-->
      <router-view/>
    </a-layout-content>
    <a-layout-footer class="home-footer">
      <Footer/>
    </a-layout-footer>
  </a-layout>
</template>

<script>
import {getCurrentInstance, onBeforeMount, reactive, ref, toRefs} from "vue";
import useMenu from "@/store/menu";
import UserHead from "@/components/UserHead";
import Footer from "@/views/Footer";
import ContentView from "@/views/Content";
import {apiRequest, queryUserMenu} from "@/service/service";
import {useRouter} from "vue-router";

export default {
  name: "HomeView",
  components: {
    ContentView,
    UserHead,
    Footer
  },
  setup() {
    const {proxy} = getCurrentInstance()
    const router = useRouter()
    const top = ref(10)
    /** menu菜单切换 **/
    const menuStore = useMenu()
    const {current} = toRefs(menuStore)
    const clickMenuItem = ({key}) => {
      menuStore.curPush(key)
      router.push({
        name: 'content'
      })
      let leftMenu = reactive([]);
      menuList.menuFatherLists.forEach(list => {
        leftMenu = list.userMenuLists.filter(item => key === item.menuid)
      })
      proxy.$mitt.emit('leftMenu', leftMenu[0])
    }

    /** 用户菜单 **/
    const menuList = reactive({
      menuFatherLists: []
    })
    onBeforeMount(() => {
      apiRequest(queryUserMenu(), response => {
        menuList.menuFatherLists = response.data.menuFatherLists
      })
    })

    return {
      top,
      current,
      clickMenuItem,
      menuList,
      ...toRefs(menuList)
    }
  }
}
</script>

<style scoped>
.ant-layout-header {
  background-color: #ffffff;
  box-shadow: 0 2px 8px #f0f1f2;
}

.daily-title {
  font-size: 18px;
  color: dodgerblue;
  text-shadow: 0 2px 8px #b181ff;
}

.home-footer {
  background: #48474c;
}
</style>
